<template>
	<view class="card weather-card">
	  <view class="title">🌤 实时天气</view>
	  <view class="weather-content">
		<view class="weather-main">
		  <text class="temperature">{{ weather.temperature }}°</text>
		  <text class="condition">{{ weather.condition }}</text>
		</view>
		<view class="weather-details">
		  <view>📍 {{ weather.city }}</view>
		  <view>🌡️ 体感 {{ weather.feelsLike }}°</view>
		  <view>💧 湿度 {{ weather.humidity }}%</view>
		</view>
	  </view>
	</view>
</template> 
<script>
export default{
	data(){
		return{
			weather: {
			  city: '长沙',
			  temperature: 24,
			  condition: '晴天',
			  feelsLike: 26,
			  humidity: 65
			}
		}
	}
}

</script>

<style scoped>
.weather-card {
  background: linear-gradient(135deg, #89cff0 0%, #4682b4 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.weather-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
}

.weather-content {
  display: flex;
  align-items: center;
}

.weather-main {
  flex: 1;
  text-align: center;
}

.temperature {
  font-size: 42px;
  font-weight: bold;
  display: block;
  line-height: 1;
}

.condition {
  font-size: 16px;
  opacity: 0.9;
}

.weather-details {
  font-size: 12px;
  opacity: 0.8;
  border-left: 1px dashed rgba(255,255,255,0.3);
  padding-left: 15px;
  margin-left: 15px;
}
</style>